<!--
  做了界面，但没有的
-->

<template>
    <div class="main fail-invoice-container">
      <section>
        <searchForm :listQuery="listQuery" :queryConfig="queryConfig" :search="search"/>
        <div style="padding: 10px 0;">
          <el-button type="primary" size="mini">导出</el-button>
        </div>
        <el-table v-loading="listLoading" :data="list" element-loading-text="给我一点时间" border fit highlight-current-row @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column align="center" label="订单号" prop="msgContent" min-width="160">
          </el-table-column>
           <el-table-column align="center" label="会员姓名" prop="msgContent" min-width="160">
          </el-table-column>
          <el-table-column align="center" label="手机号" prop="remark" min-width="160"></el-table-column>
          <el-table-column align="center" label="发票抬头" prop="contractingPartyName" min-width="160">
          </el-table-column>
          <el-table-column align="center" label="纳税人识别号" prop="remark" min-width="160"></el-table-column>
          <el-table-column align="center" label="开票主体" prop="remark" min-width="160"></el-table-column>
          <el-table-column align="center" label="发票数" prop="remark" min-width="160"></el-table-column>
          <el-table-column align="center" label="开票项目" prop="remark" min-width="160"></el-table-column>
          <el-table-column align="center" label="开票金额" prop="remark" min-width="160"></el-table-column>
          <el-table-column align="center" label="失败原因" prop="remark" min-width="160"></el-table-column>
          <el-table-column align="center" label="申请时间" prop="remark" min-width="160"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
      >
      </el-pagination>
    </section>
    <el-dialog :visible="dialogVisibleDetail" top="50px">
      <h4 slot="title" class="fail-detail-title">已开开发票详情</h4>
      <ul class="detail-panel">
        <li class="w-50"><div class="label-item">合同号：</div><div class="value-item">2189746489</div></li>
        <li class="w-50"><div class="label-item">结算单号:</div><div class="value-item">2189746489</div></li>
        <li class="w-50"><div class="label-item">发票抬头：</div><div class="value-item">碧斯诺兰</div></li>
        <li class="w-50"><div class="label-item">纳税人识别号：</div><div class="value-item">911101087404151135</div></li>
        <li class="w-50"><div class="label-item">发票性质：</div><div class="value-item">增值税普通发票</div></li>
        <li class="w-50"><div class="label-item">失败原因：</div><div class="value-item">百旺余量不足</div></li>
        <li class="w-100"><div class="label-item">合同签约方：</div><div class="value-item">碧斯诺兰实业发展有限公司</div></li>
        <li class="w-50"><div class="label-item">开票项目：</div><div class="value-item">商品费用</div></li>
        <li class="w-50"><div class="label-item">开票总金额(含税)：</div><div class="value-item">155.5</div></li>
        <li class="w-50"><div class="label-item">税率%：</div><div class="value-item">2.5</div></li>
        <li class="w-50"><div class="label-item">税额：</div><div class="value-item">14.5</div></li>
      </ul>
      <ul class="detail-panel">
        <li class="w-50"><div class="label-item">收件人姓名：</div><div class="value-item">张嬷嬷</div></li>
        <li class="w-50"><div class="label-item">收件人手机号:</div><div class="value-item">12345689958</div></li>
        <li class="w-50"><div class="label-item">邮箱地址：</div><div class="value-item">123598978789@qq.com</div></li>
      </ul>
      <ul class="detail-panel">
        <li class="w-100"><div class="label-item">注册地址：</div><div class="value-item">厦门市思明区前埔中路323号莲前集团大厦22层2-A242单元</div></li>
        <li class="w-100"><div class="label-item">注册电话：</div><div class="value-item">0592-3381111-1259</div></li>
        <li class="w-100"><div class="label-item">开户银行：</div><div class="value-item">上海浦东发展银行股份有限公司厦门分行</div></li>
        <li class="w-100"><div class="label-item">银行账户：</div><div class="value-item">36010078801100000371</div></li>
      </ul>
      <ul class="detail-panel">
        <li class="w-100"><div class="label-item">备注：</div><div class="value-item">-A242单元</div></li>
      </ul>
    </el-dialog>
  </div>
</template>
<script>
import searchForm from '@/components/searchForm/index'
export default {
  components: {
    searchForm
  },
  data() {
    return {
       listQuery: {
        orderNo: '',
        concatName: '',
        name: '',
        mobile: '',
        xiname: '',
        status: '',
        dateRange: [],
        pageSize: 10,

      },
      listTotal: 0,
      list: [],
      queryConfig: [
        {type: 'input', label: '发票抬头', prop: 'orderNo'},
        {type: 'input', label: '合同号', prop: 'concatNo' },
        {type: 'input', label: '订单号', prop: 'concatName'},
        {type: 'input', label: '手机号', prop: 'mobile' },
         {type: 'input', label: '开票主体', prop: 'xiname' },
         {type: 'input', label: '发票号码', prop: 'xiname' },

        {type: 'daterange', label: '开票时间', prop: 'dateRange'},
         {type: 'input', label: '会员姓名', prop: 'name' },
         {type: 'select', label: '发票状态', prop: 'status', data: [{label: '全部', value:'全部'}, {label: '新建', value:'新建'}, {label: '成功', value:'成功'}, {label: '失败', value:'失败'}] }
      ],
      listLoading: false,
      dialogVisibleDetail: false
    }
  },
  methods: {
    getList() {
      console.log('getList')
    },
    // 搜索
    search(){console.log(11)},

    // 选择
    handleSelectionChange(val){
      console.log(val)
    },
    // 切换分页
    handleCurrentChange(page) {
      this.listQuery.pageNum = page
      this.getList()
    },
    // 切换分页数
    handleSizeChange(pageSize) {
      this.listQuery.pageSize = pageSize
      this.getList()
    },
    getInvoiceDetail(){
      // /invoice-web-manage/invoice/mark/detail
      if (!this.id) return
      const data = {
        invoiceMarkId: '', // 开票id
        invoiceId: '' // 发票申请id
      }
      this.request({
        url: `/invoice-web-manage/invoice/mark/detail`,
        method: 'post',
        data: data
      }).then(data => {
        console.log(data)
      }).catch(err => {
        console.log(err);
      });
    }
  }
}
</script>
<style scoped lang="scss">
.fail-invoice-container {
   /deep/ .el-dialog {
    max-width: 800px;
  }
  .fail-detail-title {
    font-size: 18px;
    text-align: center;
  }
  /deep/ .el-dialog__body{
    padding-top: 0px;
  }
  .detail-panel {
    overflow: hidden;
    width: 100%;
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 20px;
    .w-50 {
      width:50%;
      float: left;
      padding: 10px 0;
    }
    .label-item, .value-item {
      float: left;
    }
    .label-item {
      width: 130px;
      text-align: right;
    }
    .w-100 {
      float: left;
      width: 100%;
      padding: 10px 0;
    }
  }
}

</style>
